<template>
  <div>

    <v-flex xs12 sm4 md3>
      <el-tabs type="border-card">
        <el-tab-pane label="登录">
          <el-alert v-if="show" v-model="mytype, show , toastContent"
                    :type=mytype :closable="false">{{toastContent}}
          </el-alert>
          <v-form label-width="200px">
            <v-text-field prepend-icon="person" v-model="loginUsername"
                          label="请输入手机号码"
                          type="text"/>
            <v-text-field
              prepend-icon="lock"
              v-model="LoginPassword"
              label="密码"
              id="LoginPassword"
              :append-icon="e1 ? 'visibility' : 'visibility_off'"
              :append-icon-cb="() => (e1 = !e1)"
              :type="e1 ? 'text' : 'password'"
            ></v-text-field>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" @click="doLogin">登录</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-form>
        </el-tab-pane>
        <el-tab-pane label="注册">
          <v-form label-width="200px">
            <v-text-field prepend-icon="person" v-model="username" label="请输入手机号码"
                          type="text"/>
            <v-text-field
              prepend-icon="lock"
              v-model="password"
              label="密码"
              id="password"
              :append-icon="el2 ? 'visibility' : 'visibility_off'"
              :append-icon-cb="() => (el2 = !el2)"
              :type="el2 ? 'text' : 'password'"
            ></v-text-field>
            <div>
              <img style="margin-left: 15px;float:left; margin-top: 15px" width="80px" alt="验证码"
                   onclick="this.src='/image?d='+new Date()*1"
                   src="/image"/>
              <v-text-field style="margin-left: 2px ; width:110px;float:left" v-model="imagecode"
                            label="请输入随机码"
                            type="text">
              </v-text-field>

              <v-btn color="info" @click="getVeriCode" style="float:right">获取手机验证码</v-btn>
            </div>
            <div>
              <v-text-field style="margin-left: 10px ;clear:both" v-model="inputCode"
                            label="请输入手机验证码"
                            type="text">
              </v-text-field>
            </div>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" @click="doRegister">登录</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-form>
        </el-tab-pane>
      </el-tabs>


    </v-flex>


  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'ui2',
    data() {
      return {
        loginUsername: '',
        LoginPassword: '',
        username: '',
        password: '',
        imagecode: '',
        inputCode: '',
        mytype: 'error',
        toastContent: '消息',
        show: false,
        e1: false,
        el2: false
      }
    },
    methods: {
      doLogin: function () {
        var name = this.loginUsername;
        var pwd = this.LoginPassword;
        //判断是否是空
        this.toastContent = '没有当前用户，请到注册页面去注册'


        axios({
          method: 'post',
          url: 'http://172.10.102.101:8089/vueLogin',
          params: {
            'username': name,
            'password': pwd
          }
        }).then(() => {

        }).catch(() => {

        })


        axios({
          method: 'post',
          url: 'http://172.10.102.101:8089/vueLogin',
          params: {
            'username': name,
            'password': pwd
          }
        }).then((data) => {
          console.log(data);

          console.log(data.data);


          let code = data.data.code;
          if (code === 200) {
            this.mytype = 'success'
            this.show = true;
            this.toastContent = '登录成功'
          } else if (code === 411) {
            this.show = true;
            this.mytype = 'error'
            this.toastContent = '没有当前用户，请到注册页面去注册'
            //设置一个定时器，3秒钟之后隐藏
            var vshow = this
            window.setTimeout(() => {
              console.log("timeout");
              vshow.show = false;
            }, 2000)
          }
        }).catch((erro) => {
          console.log(erro);
        })
      },
      getVeriCode: function () {
      },
      doRegister: function () {
      }
    }
  }
</script>

<style scoped>

</style>
